import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:inmotion_pro/l10n/local.dart';
import 'package:inmotion_pro/pages/models/vehicle_function_button_model.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';

import '../../../../config/r.dart';
import '../../../../service/cache_config_service.dart';
import '../../others/common_enum/vehicle_function_button_type.dart';

// 功能区域视图
class VehicleFunctionButtonsView extends StatefulWidget {
  // 总里程
  final double totalMileage;

  // 锁车状态
  final bool isLocked;

  // 按钮列表
  final List<VehicleFunctionButtonModel> buttonTypes;

  // 点击回调
  final Function(VehicleFunctionButtonType) onTap;

  const VehicleFunctionButtonsView({
    super.key,
    required this.totalMileage,
    required this.isLocked,
    required this.buttonTypes,
    required this.onTap,
  });

  @override
  VehicleFunctionButtonsState createState() => VehicleFunctionButtonsState();
}

class VehicleFunctionButtonsState extends State<VehicleFunctionButtonsView> {
  final ScrollController _scrollController = ScrollController();
  RxList<VehicleFunctionButtonModel> buttons =
      <VehicleFunctionButtonModel>[].obs;

  @override
  void initState() {
    super.initState();
    buttons.value = widget.buttonTypes;
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    // 之间的间距
    double spacing = 20.w;
    // 4个按钮的宽度
    double itemWidth4 = (screenWidth - 4 * CONTENT_MARGIN - 3 * spacing) / 4;
    // 3个按钮的中间最宽的宽度
    double itemWidth3 = itemWidth4 * 1.8;
    // 文字的高度
    double textHeight = 20.w;
    // 按钮与文字之间的空隙
    double verticalSpacing = 8.w;
    return Obx(
      () => Container(
        padding: EdgeInsets.symmetric(vertical: CONTENT_MARGIN),
        color: GrayColor.gray1,
        child: Column(
          children: [
            // 总里程
            _totalMileageView(),
            SizedBox(height: CONTENT_MARGIN),

            Padding(
              padding: EdgeInsets.symmetric(horizontal: CONTENT_MARGIN),
              child: Divider(
                color: Colors.white.withOpacity(0.1),
                height: 1,
              ),
            ),

            SizedBox(height: CONTENT_MARGIN),

            Padding(
              padding: EdgeInsets.symmetric(horizontal: CONTENT_MARGIN / 2),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: buttons
                    .asMap()
                    .entries
                    .map(
                      (entry) => Column(
                        children: [
                          _buildFancyButton(
                            entry.key,
                            buttons.length == 3 && entry.key == 1
                                ? itemWidth3
                                : itemWidth4,
                            itemWidth4,
                          ),
                          SizedBox(height: verticalSpacing),
                          SizedBox(
                            height: textHeight,
                            child: Obx(
                              () => LxText(
                                buttons[entry.key].title,
                                color: Colors.white,
                                fontWeightEnum: LxFontWeightEnum.bodySmall,
                                maxLines: 2,
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                    .toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 总里程
  Widget _totalMileageView() {
    double minHeight = 50.w;
    return Material(
      color: Colors.transparent,
      child: RoundedInkWell(
        borderRadius: 40.w,
        onTap: () => widget.onTap(VehicleFunctionButtonType.realtimeDetail),
        child: Container(
          padding: EdgeInsets.only(
            top: 8.w,
            left: CONTENT_MARGIN * 1.6,
            right: CONTENT_MARGIN * 1.6,
          ),
          constraints: BoxConstraints(minHeight: minHeight),
          child: Stack(
            children: [
              Positioned(
                bottom: 8.w,
                child: LxText(
                  local.total_mileage,
                  color: GrayColor.gray6,
                  fontWeightEnum: LxFontWeightEnum.bodyMedium,
                  textAlign: TextAlign.start,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.baseline,
                textBaseline: TextBaseline.ideographic,
                children: [
                  LxText(
                    " ${CacheConfigService.to.metricUnit(widget.totalMileage).$2}",
                    color: Colors.transparent,
                    fontWeightEnum: LxFontWeightEnum.bodyMedium,
                  ),
                  LxText(
                    CacheConfigService.to
                        .metricUnit(widget.totalMileage)
                        .$1
                        .round()
                        .toString(),
                    color: Colors.white,
                    fontWeightEnum: LxFontWeightEnum.diplayMedium,
                  ),
                  LxText(
                    " ${CacheConfigService.to.metricUnit(widget.totalMileage).$2}",
                    color: GrayColor.gray6,
                    fontWeightEnum: LxFontWeightEnum.bodyMedium,
                  ),
                ],
              ),
              Positioned(
                right: 0,
                bottom: 8.w,
                child: Image.asset(
                  R.arrowRightIcon,
                  width: 30.w,
                  height: 30.w,
                  fit: BoxFit.fitWidth,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 构建单个按钮
  Widget _buildFancyButton(int index, double width, double height) {
    return AnimatedContainer(
      duration: const Duration(milliseconds: 300),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(40.w),
        child: Container(
          width: width,
          height: height,
          color: GrayColor.gray2,
          child: Material(
            color: Colors.transparent, // 使用Material包裹，保证水波纹效果
            child: RoundedInkWell(
              borderRadius: 40.w,
              onTap: () {
                widget.onTap(widget.buttonTypes[index].type);
              },
              child: Image.asset(
                buttons[index].assetPath,
                width: 24.w,
                height: 24.w,
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}
